
<template>
  <div class="admin-parents-page">
    <GgPage pageType="2" title="parents">
      <template v-slot:left>
        <div class="createBtnBox">
          <gg-create-button @click="() => {}" label="Create layer" />
        </div>
        <gg-flex-menus
          :menus="menuDatas"
          @select="menuSelect"
          :default-active="activeIndex"
        />
      </template>
      <div>
        <edoovo-table
          ref="multipleTable"
          :data="tableData1"
          title="列表"
          tooltip-effect="dark"
          default-value="-"
          rowKey="id"
          v-loading="isLoading"
          :sort="sort"
          @sortChange="_onSortChange"
        >
          <!-- ===== -->
          <!-- 空状态 -->
          <!-- ===== -->
          <div slot="empty" style="text-align: center">
            <div
              style="
                width: 213px;
                text-align: center;
                border-radius: 50%;
                margin-bottom: 12px;
                line-height: 200px;
              "
            >
              <img
                style="width: 100%"
                :src="require('@/assets/images/products/noData.svg')"
              />
            </div>
            <p style="font-size: 22px">No lessons yet.</p>
          </div>
          <!-- ======= -->
          <!-- 分页组件 -->
          <!-- ======= -->
          <div
            v-if="filterRenderData.length"
            class="list-filterBox"
            slot="filter"
          >
            <BaseFilter
              @filterCallback="_filterCallback"
              :renderData="filterRenderData"
              :multKeys="[]"
            />
          </div>

          <edoovo-pagination
            slot="pagination"
            @size-change="_pageSizeChange"
            @current-change="_pageChange"
            :current-page="pageNumber"
            :page-size="pageSize"
            :total="totalNum"
          />
          <edoovo-table-column
            size="L"
            label="name"
            prop="fullName"
            sortName="fullName"
            :tooltip="true"
            v-slot="{ row }"
            :getTooltipText="(row) => `${row.fullName}`"
            @click="linkTo"
          >
            <div class="table-cell-box">
              <head-img
                class="table-cell-img"
                :src="row.avatar ? `${row.avatar}?${+new Date()}` : ``"
                :firstName="row.firstName"
                :lastName="row.lastName"
                line-height="32"
                @click="linkTo"
              />
              <span class="table-cell-name">{{ row.fullName }}</span>
            </div>
          </edoovo-table-column>
          <edoovo-table-column
            size="L"
            label="邮箱"
            prop="email"
            sortName="email"
          />
          <edoovo-table-column
            size="M"
            label="first name"
            prop="firstName"
            sortName="firstName"
          />
          <edoovo-table-column
            size="M"
            label="last name"
            prop="lastName"
            sortName="lastName"
          />
          <edoovo-table-column
            size="M"
            label="昵称"
            prop="nickName"
            sortName="nickName"
          />
          <edoovo-table-column
            size="M"
            label="性别"
            prop="gender"
            sortName="gender"
            :tooltip="true"
            v-slot="{ row }"
            :getTooltipText="(row) => `${row.gender ? 'Male' : 'Female'}`"
            >{{ row.gender ? "Male" : "Female" }}</edoovo-table-column
          >

          <edoovo-table-column size="M" key="action">
            <!-- <baseButton type="primary">Edit</baseButton> -->
            <gg-dropdown class="dropdown-con">
              More
              <template slot="menus">
                <gg-dropdown-item @click="openMessageBox">
                  Suspend
                </gg-dropdown-item>
                <gg-dropdown-item @click="() => {}">
                  Reset password
                </gg-dropdown-item>
                <gg-dropdown-item @click="() => {}">
                  Reactivate
                </gg-dropdown-item>
              </template>
            </gg-dropdown>
          </edoovo-table-column>
        </edoovo-table>
      </div>
    </GgPage>
    <Snackbar
      :visible.sync="isSnackbarShow"
      content="Parent has been suspended"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuDatas: [
        {
          name: "parents",
          key: "CUSTOMERS",
          active: true,
          children: [
            {
              name: "Active",
              key: "ACTIVE",
              children: [
                {
                  name: "TEST1",
                  key: "TEST1",
                },
                {
                  name: "TEST2",
                  key: "TEST2",
                },
              ],
            },
          ],
        },
        {
          name: "Suspended",
          key: "SUSPENDED",
        },
      ],
      activeIndex: "TEST1",
      tableData1: [
        {
          id: 307,
          firstName: "扬州",
          lastName: "炒饭",
          fullName: "炒饭扬州",
          nickName: "yzcf",
          email: "test1@edoovo.com",
          gender: 0,
          avatar:
            "https://edoovo-hk.oss-accelerate.aliyuncs.com/uat_avatar/2020-09-11/bd537d11fcbf4c398c047d377a62d681-130423902631638220815238764789965073975.png",
        },
        {
          id: 306,
          firstName: "TeST1sT",
          lastName: "teST2Nd",
          fullName: "TeST1sT teST2Nd",
          nickName: "test12",
          email: "test2@edoovo.com",
          gender: 0,
          avatar:
            "https://edoovo-hk.oss-accelerate.aliyuncs.com/uat_avatar/2020-09-10/82d68556a41946eebd6bfac10a1fdae7-130394379542344908810586033257267507250.png",
        },
        {
          id: 305,
          firstName: "小红",
          lastName: "bai",
          fullName: "xb bai",
          nickName: "test12",
          email: "test3@edoovo.com",
          gender: 1,
        },
      ],
      filterRenderData: [
        { filterKey: "id", type: "input" },
        { filterKey: "firstName", type: "input", inputType: "number" },
        {
          filterKey: "gender",
          type: "checkbox",
          checkboxData: [
            { key: "gender1", value: "0" },
            { key: "gender2", value: "1" },
          ],
        },
        { filterKey: "email", type: "input" },
        { filterKey: "nickName", type: "input" },
      ],
      isLoading: false,
      pageNumber: 1,
      pageSize: 20,
      totalNum: 4,
      sort: { name: "createDate", type: "desc" },
      isSnackbarShow: false,
    };
  },
  methods: {
    menuSelect(key, item) {
      console.log(key, item);
      this.activeIndex = key;
    },
    _getData() {
      console.log("加载新数据");
    },
    _pageChange(val) {
      this.pageNumber = val;
      this._getData();
    },
    _pageSizeChange(val) {
      this.pageSize = val;
      this._getData();
    },
    _filterCallback() {},
    _onSortChange(sort) {
      console.log("排序", this.sort);
      this.sort = sort;
      this._getData();
    },
    linkTo() {
      this.$router.push("/parentsInfo");
    },
    openMessageBox() {
      this.$confirm(
        "Once suspended, the parent will not be able to access the apps.",
        "Suspend parent ?",
        {
          cancelButtonText: "Cancel",
          confirmButtonText: "Suspend",
          cancelButtonClass: "gg_cancel_button",
          confirmButtonClass: "gg_submit_button",
          customClass: "gg_confirm",
        }
      ).then(() => {
        this.handleSuspend();
      });
    },
    handleSuspend() {
      this.isSnackbarShow = true;
    },
  },
};
</script>

<style lang="less" scoped>
.admin-parents-page {
  .createBtnBox {
    padding-left: 8px;
    padding-bottom: 24px;
  }
}
</style>
